<template>
	<view class="pay-container">
		<view class="price-title">
			<view class="price-prefix">¥</view>
			<view class="price">{{ amount }}</view>
		</view>

		<view class="payway-list">
			<view class="select-pay">支付方式</view>
			<radio-group @change="radioChange">
				<view class="pay-item" v-for="(item,index) in payList" :key="index">
					<view class="pay-left">
						<image class="pay-icon" :src="item.icon" mode=""></image>
						<view class="pay-name">{{ item.name }}</view>
					</view>
					<view class="radio">
						<radio :value="item.id" :checked="current === index" color="#F24644" />
					</view>
				</view>
			</radio-group>
		</view>

		<view class="submit" @tap="confirmPay">
			确认支付
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				payList: [{
						id: 0,
						name: '微信支付',
						icon: '../../static/img/wxpay.png',
						code: 2
					},
					{
						id: 1,
						name: '支付宝支付',
						icon: '../../static/img/alipay.png',
						code: 1
					}
				],
				amount: 0,
				orderSn: '',
				current: 0
			}
		},
		onLoad(e) {
			this.amount = e.amount
			this.orderSn = e.orderSn
		},
		onBackPress(e) {
			uni.navigateTo({
				url: '/pages/order/order-list'
			});
			return true;
		},
		methods: {
			confirmPay() {
				let payWay = this.payList[this.current]
				uni.showToast({
					title: payWay.name + '免密支付中...',
					icon: 'none',
					duration: 2000
				})
				// 模拟回调支付回调
				$http.request({
					url: `/order/order/simulatePay`,
					data: {
						orderSn: this.orderSn,
						payWay: payWay.code
					}
				}).then(res => {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/pay/pay-success'
						})
					}, 2000)
				})
			},
			radioChange(e) {
				this.current = e.detail.value
			}
		}
	}
</script>

<style scoped>
	.pay-container {
		background-color: #F0F1F5;
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}

	.price-title {
		padding-top: 30rpx;
		text-align: center;
	}

	.price-prefix {
		display: inline-block;
		color: #F7381E;
		font-weight: 500;
	}

	.price {
		display: inline-block;
		color: #F7381E;
		font-size: 55rpx;
		font-weight: 600;
	}

	.payway-list {
		width: 95%;
		margin: 50rpx auto;
	}

	.pay-item {
		height: 100rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5rpx 15rpx;
		box-sizing: border-box;
	}

	.pay-left {
		display: flex;
		align-items: center;
	}

	.pay-icon {
		width: 60rpx;
		height: 60rpx;
		display: inline-block;
	}

	.pay-name {
		display: inline-block;
		margin-left: 10rpx;
	}

	.radio {
		transform: scale(0.7);
	}

	.select-pay {
		color: #A0A1A5;
		font-size: 24rpx;
	}

	.submit {
		width: 95%;
		margin: 0 auto;
		text-align: center;
		background-color: #FD4B53;
		padding: 20rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 100rpx;
	}
</style>